﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="slider.aspx.cs" Inherits="js_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>滑动条</title>

    <script src="../../js组件/slider滑动条/slider_extras.js" type="text/javascript"></script>
      <style type="text/css" media="all" title="Default">
      @import "main.css";
      @import "slider.css";
      .imageSlider1 { margin:0;padding:0; height:20px; width:800px; background-image:url("images/scrollbg.gif"); }
      .imageBar1    { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); }

      .imageSlider2 { margin:0;padding:0; height:20px; width:600px; background-image:url("images/horizBg.png"); }
      .imageBar2    { margin:0;padding:0; height:20px; width:18px; background-image:url("images/horizSlider.png"); }

      .winSlider    { margin:0;padding:0; height:15px; width:600px; background-color:#eee; border:2px solid #EAE6DD; }
      .winBar       { margin:0;padding:0; height:15px; width:10px; border:2px outset buttonhighlight; background-color:#D4D0C8; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    http://bbs.blueidea.com/thread-2724071-1-1.html
    <div>
    
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<a href="javascript:sliderImage1.setValue(sliderImage1.getValue()-1)">&lt;&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <div id="eventxdd"> </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="javascript:sliderImage1.setValue(sliderImage1.getValue()+1)"> &gt;&gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
    <div id="sliderDetail"></div>
    <div id="sliderDemo1" style="height:40px;"></div>
    
    <div id="cont"></div>
    <script language="javascript" type="text/javascript">
    
              var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1",
                                                              sliderCss: "imageSlider1",//slider的CSS类
                                                              barCss: "imageBar1",//bar的CSS类
                                                              min: 0,
                                                              max:<%=ss %>,//当前最大的页码
                                                              //max: 20,
                                                              hints: "move the slider"//提示信息title
                                                              });
          sliderImage1.onstart  = function () {
           // getElementById("sliderDetail").innerHTML = "onstart: sliderImage1 Start value is " +sliderImage1.getValue();
            document.getElementById("eventxdd").innerHTML = "当前值开始 "+ sliderImage1.getValue() +" 页";
            document.getElementById("cont").innerHTML = js_Default.PageData(Math.round( sliderImage1.getValue())).value;//得到分页的数据
          }
          sliderImage1.onchange = function () {
            //getElementById("sliderDetail").innerHTML = "onchange: sliderImage1 Current value is " +sliderImage1.getValue();
            document.getElementById("eventxdd").innerHTML = "当前值 "+ sliderImage1.getValue() +" 页";
            document.getElementById("cont").innerHTML = js_Default.PageData(sliderImage1.getValue()).value;//得到分页的数据
          };
          sliderImage1.onfinish = function () {
            //getElementById("sliderDetail").innerHTML += ", onfinish: The end the sliderImage1 value is " +sliderImage1.getValue();
            document.getElementById("eventxdd").innerHTML = "结束 "+ sliderImage1.getValue() +" 页";
            document.getElementById("cont").innerHTML = js_Default.PageData(sliderImage1.getValue()).value;//得到分页的数据
            //结束时有事件
            //如AJAX分页
           
          };
          sliderImage1.create();//创建一个新对象
          sliderImage1.setValue(Math.round(sliderImage1.max/2));//初始值

            
            
           
           
           ///erect Sliser jS Conrol
           
           
           
    </script>
    </form>
</body>
</html>
